<!DOCTYPE html>
<html lang="zh">{include file="public/head"}
    
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-search mb-2-5" id="search-form-top" style="display: none">
                                <form class="search-form" id="searchForm">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">文章标题：</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control pull-left" name="title" value="" placeholder="文章标题" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">所属标签：</label>
                                                <div class="col-sm-8">
                                                    <select name="tag_id" class="form-select">
                                                        <option value="">请选择</option>{volist name="tag" id="v1"}
                                                        <option value="{$v1.id}" disabled>{$v1.name}</option>{volist name="v1.second" id="v2"}
                                                        <option value="{$v2.id}">&nbsp;├ {$v2.name}</option>{/volist} {/volist}</select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">文章分类：</label>
                                                <div class="col-sm-8">
                                                    <select name="category_id" class="form-select">
                                                        <option value="">请选择</option>
                                                        <option value="1">重要霉</option>
                                                        <option value="2">文献</option>
                                                        <option value="3">工艺</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">状态：</label>
                                                <div class="col-sm-8">
                                                    <select name="status" class="form-select">
                                                        <option value="">请选择</option>
                                                        <option value="1">正常</option>
                                                        <option value="0">不显示</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-primary me-1" id="table-search">搜索</button>
                                            <button type="reset" class="btn btn-default" id="reset">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="toolbar" class="toolbar-btn-action">
                                <button id="btn_add" type="button" class="btn btn-primary me-1" onclick="openLayer('添加文章', '/admin/article/add', 95, 90)"> <span class="mdi mdi-plus" aria-hidden="true"></span>新增</button>
                                <button type="button" class="btn btn-primary me-1" id="show_search"> <span class="mdi mdi-database-search-outline" aria-hidden="true"></span>搜索</button>
                                <!-- <button type="button" class="btn btn-primary me-1" onclick="export_excel_data()">
              <span class="mdi mdi-file-excel-outline" aria-hidden="true"></span>导出数据
            </button> -->
                            </div>
                            <table id="table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>{include file="public/script"}
        <script type="text/javascript">
            //导出excel数据
            function export_excel_data()
            {
            	var search_where = $('#searchForm').serializeObject();
            	console.log(search_where);
            	alert('计划采用：https://xlswriter-docs.viest.me/'+search_where.username);
            }
        </script>
        <script>
            $(function(){
            	/**
            	 * 分页相关的配置
            	 **/
            	const pagination = {
            		// 分页方式：[client] 客户端分页，[server] 服务端分页
            		sidePagination: "server",
            		// 初始化加载第一页，默认第一页
            		pageNumber: 1,
            		// 每页的记录行数
            		pageSize: 11,
            		// 可供选择的每页的行数 - (亲测大于1000存在渲染问题)
            		pageList: [11, 22, 33, 50, 100],
            		// 在上百页的情况下体验较好 - 能够显示首尾页
            		paginationLoop: true,
            		// 展示首尾页的最小页数
            		paginationPagesBySide: 2
            	};
            	
            	/**
            	 * 按钮相关配置
            	 **/
            	const button = {
            		// 按钮的类
            		buttonsClass: 'default',
            		// 类名前缀
            		buttonsPrefix: 'btn'
            	}
            	
            	/**
            	 * 图标相关配置
            	 **/
            	const icon = {
            		// 图标前缀
            		iconsPrefix: 'mdi',
            		// 图标大小
            		iconSize: 'mini',
            		// 图标的设置
            		icons: {
            			columns: 'mdi-table-column-remove',
            			paginationSwitchDown: 'mdi-door-closed',
            			paginationSwitchUp: 'mdi-door-open',
            			refresh: 'mdi-refresh',
            			toggleOff: 'mdi-toggle-switch-off',
            			toggleOn: 'mdi-toggle-switch',
            			fullscreen: 'mdi-monitor-screenshot',
            			detailOpen: 'mdi-plus',
            			detailClose: 'mdi-minus'
            		}
            	};
            	
            	/**
            	 * 表格相关的配置
            	 **/
            	const table = {
            		classes: 'table table-bordered table-hover table-striped lyear-table',
            		// 请求地址
            		url: '{$action}',
            
            		//search: true, //开启刷选
            		// 唯一ID字段
            		uniqueId: 'id',
            		// 每行的唯一标识字段
            		idField: 'id',
            		// 是否启用点击选中行
            		clickToSelect: false,
            		// 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            		// showToggle: true,
            		// 请求得到的数据类型
            		dataType: 'json',
            		// 请求方法
            		method: 'post',
            		// 工具按钮容器
            		toolbar: '#toolbar',
            		// 是否分页
            		pagination: true,
            		// 是否显示所有的列
            		showColumns: true,
            		// 是否显示刷新按钮
            		showRefresh: true,
            		// 显示图标
            		showButtonIcons: true,
            		// 显示文本
            		showButtonText: false,
            		// 显示全屏
            		showFullscreen: true,
            		// 开关控制分页
            		showPaginationSwitch: true,
            		// 总数字段
            		totalField: 'total',
            		// 当字段为 undefined 显示
            		undefinedText: '-',
            		// 排序方式
            		sortOrder: "asc",
            		...icon,
            		...pagination,
            		...button
            	};
            	
            	/**
            	 * 用于演示的列信息
            	 **/
            	const columns = [{
            		field: 'example',
            		checkbox: true,
            		// 列的宽度
            		width: 5,
            		// 宽度单位
            		widthUnit: 'rem'
            	}, {
            		field: 'id',
            		title: 'id',
            	}, {
            		field: 'title',
            		align: 'center',
            		title: '文章标题',
            	}, {
            		field: 'cover_img',
            		align: 'center',
            		title: '封面图片',
            		formatter: function (value,row) {
                        if(value)
                        {
                            return '<a href="'+value+'" target="_blank"><img src="'+value+'" style="width: 35px;height:35px;object-fit: cover;cursor: pointer" data-toggle="tooltip" title="" style=""></a>';
                        }else{
                            return '<a href="'+value+'" target="_blank"><img src="/static/images/default_avatar.jpeg" style="width: 35px;height:35px;object-fit: cover;cursor: pointer" data-toggle="tooltip" title="" style=""></a>';
                        }
                        
                    }
            	}, {
            		field: 'tag_name',
            		align: 'center',
            		title: '所属标签',
            	}, {
            		field: 'category_id',
            		align: 'center',
            		title: '文章分类',
            		formatter:function(value, row, index){ 
            			var value="";
            			if (row.category_id == '1') {
            				
            				value = '重要霉';
            			} else if(row.category_id == '2') {
            				value = '文献';
            			} else if(row.category_id == '3'){
            				value = '工艺' ;
            			}else{
            				value = '' ;
            			}
            			return value;
            		}
            	}, {
            		field: 'views',
            		align: 'center',
            		title: '浏览次数',
            	}, {
            		field: 'sort',
            		align: 'center',
            		title: '显示排序',
            	},{
                    field: 'is_recommend',
                    title: '是否推荐',
                    formatter:function(value, row, index){ 
            			var value="";
            			if (row.is_recommend == '0') {
            				
            				value = '<span class="badge bg-success">不推荐</span>';
            			} else if(row.is_recommend == '1') {
            				value = '<span class="badge bg-danger">推荐</span>';
            			} else {
            				value = '<span class="badge bg-secondary">未知</span>' ;
            			}
            			return value;
            		}
                },{
                    field: 'status',
                    title: '状态',
                    formatter:function(value, row, index){ 
            			var value="";
            			if (row.status == '1') {
            				
            				value = '<span class="badge bg-success">显示</span>';
            			} else if(row.status == '0') {
            				value = '<span class="badge bg-danger">不显示</span>';
            			} else {
            				value = '<span class="badge bg-secondary">未知</span>' ;
            			}
            			return value;
            		}
                }, {
            		field: 'create_time',
            		align: 'center',
            		title: '创建时间',
            	}, {
                    field: 'operate',
                    title: '操作',
                    formatter: function(value, row, index){ 
                    	let html =
            	            '<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-bs-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
            	            '<a href="#!" class="btn btn-sm btn-default del-btn" title="删除" data-bs-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
            	        	return html;
            		},
                    events: {
                        'click .edit-btn': function (event, value, row, index) {
                            event.stopPropagation();
                            editUser(row.id);
                        },
                        'click .del-btn': function (event, value, row, index) {
                            event.stopPropagation();
                            delUser(row.id);
                        }
                    }
                }];
                
                // 自定义操作按钮
                function btnGroup (id) {
                    let html =
                        '<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-bs-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
                        '<a href="#!" class="btn btn-sm btn-default del-btn" title="删除" data-bs-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
                    return html;
                }
              
                // 操作方法 - 编辑
                function editUser(id) {
                    openLayer('编辑', '/admin/article/edit?id='+id,95,90);
                }
            
                // 操作方法 - 删除
                function delUser(id) {
                    layer.confirm('确定要删除吗?', function(index){
            		    $.post('/admin/article/del',{id:id},function(res)
            		    {
            		        if(res.code == 200)
            		        {
            		            showNotify(res.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'right');
            
            		            $("#table").bootstrapTable('selectPage', $("#table").bootstrapTable("getOptions").pageNumber);  //跳转到此页
            		        }else{
            		            showNotify(res.msg, 'danger', 1000, 'mdi mdi-information-outline', 'top', 'right');
            		        }
            		    })
            		    layer.close(index);
            	  });  
                }
            	
            	$('table').bootstrapTable({
            		...table,
            		// 自定义的查询参数
            		queryParams: function (params) {
            			var where = {
            				// 每页数据量
            				limit: params.limit,
            				// sql语句起始索引
            				offset: params.offset,
            				page: (params.offset / params.limit) + 1,
            				// 排序的列名
            				sort: params.sort,
            				// 排序方式 'asc' 'desc'
            				sortOrder: params.order,
            				//自定义搜索
            				//username: $.trim($('#username').val()),
            			};
            
            			var search_where = $('#searchForm').serializeObject();
            
            			//console.log(search_where);
            
            			var custom = $.extend(where, search_where);
            
            			return custom;
            		},
            		columns,
                    onLoadSuccess: function(data){
                        $("[data-bs-toggle='tooltip']").tooltip();
                    }
            	});
            })
        </script>
    </body>

</html>